<template>
  <div class="right-con">
    <el-form label-width="200px" style="width:80%;">
      <el-form-item label="产品名称：">
        <el-row>
          <el-col :span="18">
            <el-input v-model="app_name" placeholder="最多不超过30字,必填"></el-input>
          </el-col>
          <el-col :span="6">
            <div class="mt10 fs12 pl15" style="line-height:1;color:#999">最多不超过30字，必填</div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="链接分享标题：">
        <el-row>
          <el-col :span="18">
            <el-input v-model="share_title" placeholder="最多不超过30字"></el-input>
          </el-col>
          <el-col :span="6">
            <div class="mt10 fs12 pl15" style="line-height:1;color:#999">最多不超过30字</div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="链接分享图片：">
        <div class="clearfix">
          <div class="fl mr30" style="width:120px;">
            <img v-if="!share_image" width="120" height="120" src="../../assets/images/up_data_img.png" alt="">
            <img v-else :src="share_image" width="120" height="120" style="display: block" alt="">
          </div>
          <div class="fl mr30">
            <div>
              <label class="sentimg">
                <input type="file" name="image_file" @change="sendData($event,500)">
              </label>
            </div>
          </div>
          <div class="mt10 fs12" style="line-height:1;color:#999">图片长宽比例为1:1,且不超过500kb</div>
        </div>
      </el-form-item>
      <el-form-item label="分享详情描述：">
        <el-row>
          <el-col :span="18">
            <el-input type="textarea" placeholder="最多不超过100字" resize="none" v-model="share_description"></el-input>
          </el-col>
          <el-col :span="6">
            <div class="mt10 fs12 pl15" style="line-height:1;color:#999">最多不超过100字</div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="注册奖励游戏币(0为关闭)：">
        <el-row>
          <el-col :span="18">
            <el-input placeholder="请输入整数" v-model="register_award"></el-input>
          </el-col>
          <el-col :span="6">
            <div class="mt10 fs12 pl15" style="line-height:1;color:#999">请输入整数,最大值为1000</div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="安卓APP审核版本号：">
        <el-row>
          <el-col :span="18">
            <el-input v-model="auditing_version_android"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="iOSAPP审核版本号：">
        <el-row>
          <el-col :span="18">
            <el-input v-model="auditing_version_ios"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="onSubmit">确认修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import api from '../../assets/js/api';

  export default {
    name: "setting",
    data() {
      return {
        fdata: new FormData(),
        app_name: '',
        share_title: '',
        share_image: '',
        share_description: '',
        register_award: '',
        auditing_version_android: '',
        auditing_version_ios: '',
        settingInfo: '',
        img_is_ok: false,
      }
    },
    mounted: function () {
      this.getInfo();
    },
    methods: {
      getInfo: function () {
        api.fetch('/api/admin/options', {
          method: 'get'
        })
          .then(res => {
            this.settingInfo = res.data;
            this.app_name = res.data.app_name;
            this.share_title = res.data.share_title;
            this.share_image = res.data.share_image;
            this.share_description = res.data.share_description;
            this.auditing_version_android = res.data.auditing_version_android;
            this.auditing_version_ios = res.data.auditing_version_ios;
            this.register_award = parseInt(res.data.register_award);
          }).catch();
      },
      sendData: function (obj, imgsize) { //图片上传
        let maxSize = imgsize * 1024; //最大500KB
        let file = obj.target.files[0];
        let that = this;
        let fileSize = file.size;
        if (maxSize < fileSize) {
          this.$message.error('图片过大！');
          return false;
        } else {
          let reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function (theFile) {
            var image = new Image();
            image.src = theFile.target.result;
            image.onload = function () {
              let w = this.width;
              let h = this.height;
              if (w != h) {
                that.$message.error('图片长宽比例不合适！');
                this.img_is_ok = false;
              } else {
                that.share_image = that.getObjectURL(obj.target.files[0]);
                that.fdata.append("share_image_file", obj.target.files[0]);
              }
            };
          }
        }
      },//图片上传
      getObjectURL: function (imgobj) { //图片显示处理方法
        var url = null;
        if (window.createObjectURL != undefined) {
          url = window.createObjectURL(imgobj)
        } else if (window.URL != undefined) {
          url = window.URL.createObjectURL(imgobj)
        } else if (window.webkitURL != undefined) {
          url = window.webkitURL.createObjectURL(imgobj)
        }
        return url
      },
      onSubmit: function () {
        let submit_ok = true;
        if (!this.app_name) {
          this.$message.error('产品名称不能为空！');
          submit_ok = false;
        }
        if (this.app_name) {
          if (this.app_name.length > 30) {
            this.$message.error('产品名称最多为30个字！');
            submit_ok = false;
          }
        }
        if (this.share_title) {
          if (this.share_title.length> 30) {
            this.$message.error('链接分享标题最多为30个字！');
            submit_ok = false
          }
        }
        if (this.share_description) {
          if (this.share_description.length > 100) {
            this.$message.error('分享详情描述最多不超过100个字！');
            submit_ok = false
          }
        }
        if (this.register_award) {
          if(this.register_award !=0){
            let str=/^[0-9]*[1-9][0-9]*$/;
            if(!str.test(this.register_award)){
              this.$message.error('请输入整数,最大值为1000！');
              submit_ok = false
            }else if(this.register_award>1000){
              this.$message.error('请输入整数,最大值为1000！');
              submit_ok = false
            }
          }
        } else {
          this.register_award = 0;
        }
        if (submit_ok == true) {
          this.fdata.append("app_name", this.app_name);
          this.fdata.append("share_title", this.share_title);
          this.fdata.append("share_description", this.share_description);
          this.fdata.append("register_award", this.register_award);
          if (this.auditing_version_android) {
            this.fdata.append("auditing_version_android", this.auditing_version_android);
          } else {
            this.fdata.append("auditing_version_android", "");
          }
          if (this.auditing_version_ios) {
            this.fdata.append("auditing_version_ios", this.auditing_version_ios);
          } else {
            this.fdata.append("auditing_version_ios", "");
          }
          api.fetch('/api/admin/options', {
            method: 'POST',
            data: this.fdata
          })
            .then(res => {
              this.$message({
                message: '设置成功！',
                type: 'success'
              });
            }).catch();
        }
      },
      getObjectURL: function (imgobj) { //图片显示处理方法
        var url = null;
        if (window.createObjectURL != undefined) {
          url = window.createObjectURL(imgobj)
        } else if (window.URL != undefined) {
          url = window.URL.createObjectURL(imgobj)
        } else if (window.webkitURL != undefined) {
          url = window.webkitURL.createObjectURL(imgobj)
        }
        return url
      },
      // getLength: function (str) { //字符长度
      //   let totalLength = 0;
      //   for (let i = 0; i < str.length; i++) {
      //     if (str.charCodeAt(i) <= parseInt("0x7F")) {
      //       totalLength += 1;
      //     }
      //     else if (str.charCodeAt(i) <= parseInt("0x7FF")) {
      //       totalLength += 2;
      //     }
      //     else if (str.charCodeAt(i) <= parseInt("0xFFFF")) {
      //       totalLength += 3;
      //     }
      //     else if (str.charCodeAt(i) <= parseInt("0x1FFFFF")) {
      //       totalLength += 4;
      //     }
      //     else if (str.charCodeAt(i) <= parseInt("0x3FFFFFF")) {
      //       totalLength += 5;
      //     }
      //     else {
      //       totalLength += 6;
      //     }
      //   }
      //   return totalLength;
      // }
    }
  }
</script>

<style scoped>
  .clearfix {
    padding: 15px 0;
  }

  .clearfix .fl {

  }

  .sentimg {
    width: 120px;
    height: 120px;
    background: #f5f5f5;
    display: block;
    overflow: hidden;
    position: relative;
  }

  .sentimg input {
    opacity: 0;
  }

  .sentimg:after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: #555;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -15px;
    margin-top: -1px;
  }

  .sentimg:before {
    content: '';
    display: block;
    height: 30px;
    width: 2px;
    background: #555;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -15px;
    margin-left: -1px;
  }
</style>
